<!DOCTYPE html>
<!-- Vue的监听属性 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="utils/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>counter：{{counter}}</p>
			<!-- 下面两句等价 -->
			<button @click="counter++">click me</button>
			<!-- <button v-on:click="counter++">click me</button> -->
			<p></p>
			千米：<input type="number" v-model="kilometers"/>
			<br>
			 米：<input type="number" v-model="meters" />
		</div>
		<p id="info"></p>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					counter: 1,
					kilometers:0,
					meters:0
				},
				computed:{
					//computed性能好，但有缓存，渲染不如methods
				},
				methods: {
					method: function() {

					}
				},
				filters: {
					filter: function() {

					}
				},
				watch: {
					//这里的函数名字必须和要改变的变量值一样
					kilometers:function(val){
						this.kilometers = val;
						this.meters = this.kilometers*1000;
					},
					// input要有一个参数接收输入的值，即val
					meters:function(val){
						this.meters=val;
						this.kilometers = this.meters*0.001;
					}
				}
			});
			// $watch是一个实例方法
			// vm.$watch('counter', function(nval, oval){
			// 	alert('计数器值的变化：' + oval + '变为' + nval);00
			// })
			// 千米和米之间的转换 测试
			vm.$watch('kilometers',function(newval, oldval){
				// alert('修改前为：' + oldval + '，修改后为：' + newval);
				document.getElementById("info").innerHTML = '修改前千米值为：' + oldval + '，修改后千米值为：' + newval
			})
		</script>
	</body>
</html>
